<template>
  <BasicModal
    v-bind="$attrs"
    destoryOnClose
    :minHeight="300"
    width="45%"
    @register="registerModal"
    :title="title"
    :showOkBtn="false"
    cancelText="返回"
    @ok="handleSubmit"
  >
    <Spin :spinning="loading">
      <template v-if="flowTemplate.length">
        <div v-if="showListTemplate" class="w-full px-4 flow-template-box flex flex-wrap">
          <div
            class="item mt-4"
            v-for="item in flowTemplate[0].list"
            :key="item.templateID"
            @click="selectHandler(item.templateID)"
          >
            <img :src="templateImg" />
            <div class="name">{{ item.templatename }}</div>
          </div>
        </div>
        <div v-else>
          <Collapse v-model:activeKey="activeKey" accordion>
            <template v-for="(item, index) in flowTemplate">
              <CollapsePanel
                v-if="item.list && item.list.length"
                :key="index + 1"
                :header="item.templateTypeName"
                :showArrow="false"
              >
                <template #extra>
                  <div class="outline-icon">
                    <UpOutlined v-if="activeKey == index + 1" /><DownOutlined v-else />
                  </div>
                </template>
                <div class="classify-template-box flex flex-wrap pb-4">
                  <div
                    class="item px-4 pr-4 flex flex-wrap justify-between items-center mt-4"
                    v-for="itemChildren in item.list"
                    :key="itemChildren.templateID"
                    :class="{ active: templateId == itemChildren.templateID }"
                    @click="selectHandler(itemChildren.templateID)"
                  >
                    <div class="name truncate">{{ itemChildren.templatename }}</div>
                    <!-- <div class="btn-name">申请</div> -->
                  </div>
                </div>
              </CollapsePanel>
            </template>
          </Collapse>
        </div>
      </template>
      <div v-else class="empty-box">
        <img :src="emptyImg" />
        <div class="text-align">暂无数据</div>
      </div>
    </Spin>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref, PropType, unref, computed } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { FlowTemplateResult } from '/@/api/flow/model';
  import { Collapse, Spin } from 'ant-design-vue';
  import { DownOutlined, UpOutlined } from '@ant-design/icons-vue';
  import templateImg from '/@/assets/images/flow/flow-icon.png';
  import emptyImg from '/@/assets/images/table-empty.png';

  export default defineComponent({
    name: 'SendFlowModel',
    components: {
      BasicModal,
      Collapse,
      CollapsePanel: Collapse.Panel,
      Spin,
      DownOutlined,
      UpOutlined,
    },
    props: {
      loading: Boolean,
      title: {
        type: String,
        defalult: '新建',
      },
      flowTemplate: {
        type: Array as unknown as PropType<FlowTemplateResult[]>,
        default: () => [],
      },
      callback: {
        type: Function,
        default: () => {
          return () => {};
        },
      },
    },
    emits: ['success', 'register'],
    setup(props, { emit }) {
      const templateId = ref(0);
      const activeKey = ref(1);

      const showListTemplate = computed(() => {
        return props.flowTemplate.length <= 1;
      });

      const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
        setModalProps({ confirmLoading: false });
        props.callback(data);
      });

      async function handleSubmit() {
        try {
          closeModal();
          emit('success', unref(templateId));
        } finally {
          setModalProps({ confirmLoading: false });
        }
      }

      function selectHandler(id) {
        templateId.value = id;
        closeModal();
        emit('success', unref(templateId));
      }

      return {
        activeKey,
        registerModal,
        handleSubmit,
        templateImg,
        templateId,
        selectHandler,
        emptyImg,
        showListTemplate,
      };
    },
  });
</script>

<style lang="less" scoped>
  .flow-template-box {
    .item {
      width: 31%;
      height: 72px;
      background: #ffffff;
      border-radius: 4px;
      border: 1px solid #e9e9e9;
      display: flex;
      align-items: center;
      padding: 0 16px;
      cursor: pointer;
      margin-right: 3.5%;

      &.active {
        background: rgba(43, 99, 161, 0.05);
        border: 1px solid #2b63a1;
      }

      &:hover {
        background: rgba(43, 99, 161, 0.05);
        border: 1px solid #2b63a1;
      }

      img {
        width: 24px;
        height: 24px;
      }

      .name {
        font-size: 16px;
        font-weight: 600;
        color: #333333;
        line-height: 20px;
        margin-left: 12px;
      }

      &:nth-child(3n) {
        margin-right: 0;
      }
    }
  }

  .outline-icon {
    color: #999999;
  }

  .classify-template-box {
    .item {
      width: 31%;
      height: 36px;
      border-radius: 2px 2px 2px 2px;
      border: 1px solid #e9e9e9;
      cursor: pointer;
      margin-right: 3.5%;

      &:nth-child(3n) {
        margin-right: 0;
      }

      .name {
        width: 100%;
        color: #333333;
      }

      .btn-name {
        color: #1153d8;
      }
    }
  }

  .empty-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    color: #999;
  }

  ::v-deep(.ant-collapse-content) > .ant-collapse-content-box {
    padding: 0;
  }

  ::v-deep(.ant-collapse) {
    background: #fcfdff !important;
    border: none !important;
    box-shadow: none !important;

    .ant-collapse-item-active {
      .ant-collapse-header {
        margin-bottom: 0;
      }
    }

    .ant-collapse-header {
      background: #f5f7fb !important;
      padding: 8px 16px !important;
      margin-bottom: 16px;
    }

    > .ant-collapse-item {
      border-bottom: none !important;
    }

    .ant-collapse-content {
      border-top: none !important;
    }
  }
</style>
